<template>
  <div>
<!--    租户判断首页展示内容-->
    <basic-container v-if="tenant === '1' || tenant === '4'">
      <div class="top">
        <h3 style="color:#409eff;">考勤概况</h3>
        <div class="topLeft">
<!--          <h4>选择日期</h4>-->
<!--          <el-col :span="24" style="margin: 10px 20px 10px 20px;">-->
<!--            <avue-date v-model="dateform" :clearable="false" format="yyyy年MM月dd日" placeholder="请选择日期"-->
<!--                       value-format="yyyy-MM-dd"-->
<!--                       @change="changedate"></avue-date>-->
<!--            <el-col :span="24"></el-col>-->
<!--          </el-col>-->
          <p style="margin: 16px 0 6px 0;">当前日期<span style="margin-left: 24px">{{this.value.getFullYear()}}年{{this.value.getMonth()+1}}月{{this.value.getDate()}}日</span></p>
          <p style="display: inline-block">考勤时间</p>
          <el-radio-group v-model="valuetime" class="radiogroup" style="margin: 0 20px 0px 20px;width: 90%" @change="changetime">
            <el-radio-button border label="06:00-07:35-11:59" size="medium"><span style="font-size: 14px">06:00-07:35</span>
            </el-radio-button>
            <el-radio-button border label="12:00-13:20-13:49" size="medium"><span style="font-size: 14px">12:00-13:20</span>
            </el-radio-button>
            <el-radio-button border label="13:50-14:25-16:39-12:00-13:20" size="medium"><span
                style="font-size: 14px">13:50-14:25</span>
            </el-radio-button>
            <el-radio-button border label="16:00-19:30-20:29" size="medium"><span style="font-size: 14px">16:00-19:30</span>
            </el-radio-button>
            <el-radio-button border label="20:30-21:00-22:09" size="medium"><span style="font-size: 14px">20:30-21:00</span>
            </el-radio-button>
            <el-radio-button border label="22:10-22:40-22:40" size="medium"><span style="font-size: 14px">22:10-22:40</span>
            </el-radio-button>
          </el-radio-group>
<!--          目前还仅针对广雅，年级为写死的数据-->
          <p style="display: inline-block">选择年级</p>
          <el-radio-group v-model="valuegrade" style="margin: 0 20px 10px 20px; width: 90%" @change="changegrade">
            <el-radio-button border label="" size="medium"><span style="font-size: 14px">全部</span>
            </el-radio-button>
            <el-radio-button border label="650" size="medium"><span style="font-size: 14px">初一</span>
            </el-radio-button>
            <el-radio-button border label="655" size="medium"><span style="font-size: 14px">初二</span>
            </el-radio-button>
            <el-radio-button border label="97" size="medium"><span style="font-size: 14px">初三</span>
            </el-radio-button>
            <el-radio-button border label="127" size="medium"><span style="font-size: 14px">高一</span>
            </el-radio-button>
            <el-radio-button border label="126" size="medium"><span style="font-size: 14px">高二</span>
            </el-radio-button>
            <el-radio-button border label="128" size="medium"><span style="font-size: 14px">高三</span>
            </el-radio-button>
          </el-radio-group>

          <avue-data-tabs :option="checkoption" @click="gotoCheck"></avue-data-tabs>

        </div>
        <div class="topRight">
          <el-calendar v-model="value">
            <template
                slot="dateCell"
                slot-scope="{date, data}">
              <div class="el-calendar-day" @click="changedate(data)">
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split('-').slice(2).join('-') }}
                </p>
              </div>
            </template>
          </el-calendar>
        </div>
      </div>
      <div class="bottom">
        <h3 style="color:#409eff">今日请假概况</h3>
        <div class="bottom-leave">
          <div id="leave" :style="{width: '100%', height: '350px',float:'left'}">
          </div>
        </div>
        <div class="bottom-right">
          <div class="bottom-item" @click="gotoSick()">
            <div id="sickLeave" :style="{width: '100%', height: '350px',float:'left'}">
            </div>
          </div>
          <div class="bottom-item" @click="gotoCasual()">
            <div id="casualLeave" :style="{width: '100%', height: '350px',float:'left'}">
            </div>
          </div>
          <div class="bottom-item" @click="gotoNight()">
            <div id="nightLeave" :style="{width: '100%', height: '350px',float:'left'}">
            </div>
          </div>
        </div>
      </div>
    </basic-container>

    <basic-container v-else>
      <div class="bg"></div>
    </basic-container>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import 'element-ui/lib/theme-chalk/index.css';
import {StudentCheck} from "@/api/check/student-check";
import {leaveTotal, particularsObj} from '@/api/leave/particulars';
import echarts from 'echarts';
import moment from 'moment'
import {getStore} from "@/util/store";

export default {
  name: 'Wel',
  components: {
    echarts,
    moment
  },
  data() {
    return {
      tenant: getStore({ name: "tenantId" }),
      value: new Date(),
      valuetime: '06:00-07:35-11:59',
      valuegrade: '',
      dateform: '',
      obj: '',
      option: {
        column: [{
          label: "日期",
          prop: "date",
          type: "date",
          span: 8,
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
        }]
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      form: {
        title: '考勤概况',
        // title1:'今日请假',
      },
      titleoption: {
        dialogDirection: 'btt',
        submitBtn: false,
        emptyBtn: false,
        menuBtn: false,
        column: [
          {
            label: "",
            labelWidth: 20,
            type: 'title',
            prop: "title",
            span: 24,
            styles: {
              color: '#409eff',
              fontSize: '20px'
            }
          },
        ]
      },
      checkoption: {
        span: 8,
        data: [
          {
            click: function (item) {
              this.that.gotoCheck(item.checkinState = 1)
              // console.log(item)
            },
            title: '已考勤',
            subtitle: '查看详情',
            count: 0,
            allcount: 0,
            text: '应考勤人数',
            color: '#2FD58B',
            key: '正常',
            that: this,
          },
          {
            click: function (item) {
              this.that.gotoCheck(item.checkinState = 2)
            },
            title: '迟到',
            subtitle: '查看详情',
            count: 0,
            allcount: 0,
            text: '应考勤人数',
            color: '#FFBA2F',
            key: '迟到',
            that: this,
          },
          {
            click: function (item) {
              this.that.gotoCheck(item.checkinState = 0)
            },
            title: '缺勤',
            subtitle: '查看详情',
            count: 0,
            allcount: 0,
            text: '应考勤人数',
            color: '#3291F8',
            key: '缺勤',
            that: this,
          },
          // {
          //   click: function () {
          //     this.that.gotoCheckLeave()
          //   },
          //   title: '请假',
          //   subtitle: '当日',
          //   count: 0,
          //   allcount: 0,
          //   text: '总人数',
          //   color: 'rgb(245 223 63)',
          //   key: '请假',
          //   that: this,
          // }
        ]
      },
      leaveTotal: '',
      leaveData: [],
      sickData: [],
      casualData: [],
      nightData: [],
      // leaveoption: {
      //   data: [
      //     {
      //       click: function (item) {
      //         this.that.gotoLeave(item.leaveType = 0)
      //       },
      //       title: '事假',
      //       subtitle: '请假中',
      //       count: 0,
      //       allcount: '',
      //       text: '点击查看事假人数详情',
      //       color: 'rgb(56, 161, 242)',
      //       key: '事假',
      //       that: this,
      //     },
      //     {
      //       click: function (item) {
      //         this.that.gotoLeave(item.leaveType = 1)
      //       },
      //       title: '病假',
      //       subtitle: '请假中',
      //       count: 0,
      //       allcount: '',
      //       text: '点击查看病假人数详情',
      //       color: 'rgb(230, 71, 88)',
      //       key: '病假',
      //       that: this,
      //     },
      //     {
      //       click: function (item) {
      //         this.that.gotoLeave(item.leaveType = 2)
      //       },
      //       title: '晚休',
      //       subtitle: '请假中',
      //       count: 0,
      //       allcount: '',
      //       text: '点击查看晚休人数详情',
      //       color: 'rgb(178, 159, 255)',
      //       key: '晚休',
      //       that: this,
      //     }
      //   ]
      // },
    }
  },
  computed: {
    ...mapGetters(['userInfo','menu','tagWel'])
  },
  created() {
    console.log('当前租户',this.tenant)
    // 默认当前日期展示
    this.Date = new Date();
    // 获取当前年
    this.year = this.Date.getFullYear();
    // 获取当前月
    this.month = this.Date.getMonth() + 1;
    // 获取当前日
    this.date = this.Date.getDate();
    //  自动补0
    this.month = (this.month < 10) ? '0' + this.month : this.month = this.month;
    this.date = (this.date < 10) ? '0' + this.date : this.date = this.date;

    // this.nowdate = this.year + '-' + this.month + '-' + this.date;
    this.dateform = this.year + '-' + this.month + '-' + this.date;
    console.log(this.dateform)
  },
  mounted() {
    if (this.tenant === '1'){
      this.getCheckList()
      this.getLeaveTotal()
      this.getsickList()
      this.getcasualList()
      this.getnightList()
    }
  },
  methods: {
    gotoCheck(item) {
      const src = `/check/student-check`
      this.$router.push({
        path: src,
        query: {date: this.dateform, deptId: this.valuegrade, timeslot: this.valuetime, checkinState: item, flag: 1}
      })
    },
    // gotoCheckLeave() {
    //   const src = `/check/student-check`
    //   this.$router.push({
    //     path: src,
    //     query: {date: this.dateform, deptId: this.valuegrade, timeslot: this.valuetime, leave: 0}
    //   })
    // },
    // gotoLeave(item) {
    //   const src = `/leave/particulars`
    //   const doctorsrc = '/leave/sick'
    //   //  如果是校医  跳转到病假管理页面 其他人跳转到请假管理
    //   if (this.userInfo.deptId === 195) {
    //     this.$router.push({
    //       path: doctorsrc,
    //       query: {}
    //     })
    //   } else {
    //     this.$router.push({
    //       path: src,
    //       query: {leaveType: item, leaveStatus: 1}
    //     })
    //   }
    // },
    gotoSick() {
      const src = `/leave/particulars`
      const doctorsrc = '/leave/sick'
      //  如果是校医  跳转到病假管理页面 其他人跳转到请假管理
      if (this.userInfo.deptId === 195) {
        this.$router.push({
          path: doctorsrc,
          query: {flag: 1}
        })
      } else {
        this.$router.push({
          path: src,
          query: {leaveType: 1, leaveStatus: 1, flag: 1}
        })
      }
    },
    gotoCasual() {
      const src = `/leave/particulars`
      var time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss",);
      console.log(time)
      this.$router.push({
        path: src,
        query: {leaveType: 0, leaveStatus: 1, endTime: time, flag: 1}
      })
    },
    gotoNight() {
      const src = `/leave/particulars`
      var time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      this.$router.push({
        path: src,
        query: {leaveType: 2, leaveStatus: 1, endTime: time, flag: 1}
      })
    },

    // 选择时间段 更新考勤数据
    changetime(value) {
      this.valuetime = value
      this.time = this.valuetime.split('-')
      var time = moment(this.value).format("YYYY-MM-DD");    //获取当前选择的日期
      var datetime = time + " " + this.time[0]         //  组合当前选择的日期和时间段
      var date = Date.parse(new Date(datetime));      //  将组合转换成时间戳
      if (new Date().getTime() < date) {              //  比较当前时间的时间戳和选择时间的时间戳
        this.$message.warning('不能选择当前时间之后的时间段')
        return
      }
      this.getCheckList()
    },

    // 选择年级 更新考勤数据
    changegrade(value) {
      this.valuegrade = value
      this.getCheckList()
    },

    // 选择日期 更新考勤数据
    changedate(data) {
      var datetime = Date.parse(new Date(data.day));
      if (new Date().getTime() < datetime) {
        this.$message.warning('不能选择今天之后的日期')
        // console.log(new Date().getTime())
        return
      }
      this.dateform = data.day
      this.getCheckList()
    },

    // 获取考勤数据
    getCheckList(page, params,) {
      let loading = this.$loading({
        lock: false,
        text: '数据加载中，请稍等',
      })
      this.time = this.valuetime.split('-')

      this.startTime = this.dateform + " " + this.time[0] + ':00'
      this.endTime = this.dateform + " " + this.time[1] + ':00'
      this.center = this.dateform + " " + this.time[2] + ':00'
      this.noonstart = this.dateform + " " + this.time[3] + ':00'
      this.noonend = this.dateform + " " + this.time[4] + ':00'

      //  考勤总人数
      //  判断是否中午时间段，需要特殊处理（13:50）
      if (this.time.length > 3) {
        StudentCheck(Object.assign({
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          // paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          CheckingStartTimeOfEnterDormOnNoon: this.noonstart,
          CheckingEndTimeOfEnterDormOnNoon: this.noonend,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[i].allcount = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })

      } else {
        StudentCheck(Object.assign({
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          // paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[i].allcount = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      }

      //正常人数
      if (this.time.length > 3) {
        StudentCheck(Object.assign({
          checkinState: 1,
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          CheckingStartTimeOfEnterDormOnNoon: this.noonstart,
          CheckingEndTimeOfEnterDormOnNoon: this.noonend,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[0].count = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      } else {
        StudentCheck(Object.assign({
          checkinState: 1,
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[0].count = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      }

      // 迟到人数
      if (this.time.length > 3) {
        StudentCheck(Object.assign({
          checkinState: 2,
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          CheckingStartTimeOfEnterDormOnNoon: this.noonstart,
          CheckingEndTimeOfEnterDormOnNoon: this.noonend,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[1].count = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      } else {
        StudentCheck(Object.assign({
          checkinState: 2,
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[1].count = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      }

      //缺勤
      if (this.time.length > 3) {
        StudentCheck(Object.assign({
          checkinState: 0,
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          CheckingStartTimeOfEnterDormOnNoon: this.noonstart,
          CheckingEndTimeOfEnterDormOnNoon: this.noonend,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          // debugger
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[2].count = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      } else {
        StudentCheck(Object.assign({
          checkinState: 0,
          pageCurrent: 1,
          startTime: this.startTime,
          endTime: this.center,
          paramCheckinTime: this.endTime,
          // filterStartTime: this.startTime,
          // filterEndTime: this.endTime,
          pageSize: 10,
          deptId: this.valuegrade
        }, params,)).then(res => {
          // debugger
          for (var i = 0; i < this.checkoption.data.length; i++) {
            this.checkoption.data[2].count = res.data.data.total
            this.page.total = res.data.data.total
          }
          loading.close()
        })
      }

      // 请假
      // if (this.time.length > 3) {
      //   StudentCheck(Object.assign({
      //     leave: 0,
      //     pageCurrent: 1,
      //     startTime: this.startTime,
      //     endTime: this.center,
      //     paramCheckinTime: this.endTime,
      //     filterStartTime: this.startTime,
      //     filterEndTime: this.endTime,
      //     CheckingStartTimeOfEnterDormOnNoon: this.noonstart,
      //     CheckingEndTimeOfEnterDormOnNoon: this.noonend,
      //     pageSize: 10,
      //     deptId: this.valuegrade
      //   }, params,)).then(res => {
      //     // debugger
      //     for (var i = 0; i < this.checkoption.data.length; i++) {
      //       this.checkoption.data[3].count = res.data.data.total
      //       this.page.total = res.data.data.total
      //     }
      //   })
      // } else {
      //   StudentCheck(Object.assign({
      //     leave: 0,
      //     pageCurrent: 1,
      //     startTime: this.startTime,
      //     endTime: this.center,
      //     paramCheckinTime: this.endTime,
      //     filterStartTime: this.startTime,
      //     filterEndTime: this.endTime,
      //     pageSize: 10,
      //     deptId: this.valuegrade
      //   }, params,)).then(res => {
      //     // debugger
      //     for (var i = 0; i < this.checkoption.data.length; i++) {
      //       this.checkoption.data[3].count = res.data.data.total
      //       this.page.total = res.data.data.total
      //     }
      //   })
      // }

    },

    //  获取第一个环状图 请假人数统计
    getLeaveTotal(page, params) {
      leaveTotal(Object.assign({}, params,)).then(res => {
        // debugger
        this.leaveData = [
          {value: res.data.data.ask_leave, name: '事假'},
          {value: res.data.data.sick_leave, name: '病假'},
          {value: res.data.data.night_leave, name: '晚休'},
        ]
        // 获取第一个环状总人数
        this.leaveTotal = Number(res.data.data.ask_leave) + Number(res.data.data.sick_leave) + Number(res.data.data.night_leave)
        let leave = document.getElementById('leave');
        let xData1 = ['晚休', '病假', '事假']
        let leaveData = this.leaveData
        this.drawLine(leave, '请假类别占比', xData1, leaveData, true)
        // console.log(this.leaveData)
      })

    },
    // 获取事假数据 (过时)
    // getLeaveList(page, params) {
    //   //获取当日事假病假晚休在假人数
    //   leaveTotal(Object.assign({
    //   }, params,)).then(res => {
    //     // debugger
    //     for (var i = 0; i < this.leaveoption.data.length; i++) {
    //       this.leaveoption.data[0].count = res.data.data.ask_leave
    //       this.leaveoption.data[1].count = res.data.data.sick_leave
    //       this.leaveoption.data[2].count = res.data.data.night_leave
    //     }
    //   })
    // },
    // 获取病假饼图数据
    getsickList() {
      let sick1 = ''
      let sick2 = ''
      let sick3 = ''
      let sick4 = ''
      let sick5 = ''
      let sick6 = ''
      //高中数据统计
      particularsObj(Object.assign({
        gradeId: 126,
        leaveType: 1,
        leaveStatus: 1
      },)).then(res => {
        sick1 = res.data.data.total
        // console.log(sick1, '高一')
      })
      particularsObj(Object.assign({
        gradeId: 127,
        leaveType: 1,
        leaveStatus: 1
      },)).then(res => {
        sick2 = res.data.data.total
        // console.log(sick2, '高二')
      })
      particularsObj(Object.assign({
        gradeId: 128,
        leaveType: 1,
        leaveStatus: 1
      },)).then(res => {
        sick3 = res.data.data.total
        // console.log(sick3, '高三')
      })
      //初中数据统计
      particularsObj(Object.assign({
        gradeId: 95,
        leaveType: 1,
        leaveStatus: 1
      },)).then(res => {
        sick4 = res.data.data.total
        // console.log(sick4, '初一')
      })
      particularsObj(Object.assign({
        gradeId: 96,
        leaveType: 1,
        leaveStatus: 1
      },)).then(res => {
        sick5 = res.data.data.total
        // console.log(sick5, '初二')
      })
      particularsObj(Object.assign({
        gradeId: 97,
        leaveType: 1,
        leaveStatus: 1
      },)).then(res => {
        sick6 = res.data.data.total
        // console.log(sick6, '初三')
        this.sickData = [
          {value: Number(sick1) + Number(sick2) + Number(sick3), name: '高中'},
          {value: Number(sick4) + Number(sick5) + Number(sick6), name: '初中'}
        ]
        let sickLeave = document.getElementById('sickLeave');
        let sickData = this.sickData
        let xData2 = ['初中', '高中']
        this.drawLine(sickLeave, '各年级病假占比', xData2, sickData, false)
        // console.log(this.sickData)
      })
    },
    // 获取事假饼图数据
    getcasualList() {
      let casual1 = ''
      let casual2 = ''
      let casual3 = ''
      let casual4 = ''
      let casual5 = ''
      let casual6 = ''
      var time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      //高中数据统计
      particularsObj(Object.assign({
        gradeId: 126,
        leaveType: 0,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        casual1 = res.data.data.total
        // console.log(casual1, '高一')
      })
      particularsObj(Object.assign({
        gradeId: 127,
        leaveType: 0,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        casual2 = res.data.data.total
        // console.log(casual2, '高二')
      })
      particularsObj(Object.assign({
        gradeId: 128,
        leaveType: 0,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        casual3 = res.data.data.total
        // console.log(casual3, '高三')
      })
      //初中数据统计
      particularsObj(Object.assign({
        gradeId: 95,
        leaveType: 0,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        casual4 = res.data.data.total
        // console.log(casual4, '初一')
      })
      particularsObj(Object.assign({
        gradeId: 96,
        leaveType: 0,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        casual5 = res.data.data.total
        // console.log(casual5, '初二')
      })
      particularsObj(Object.assign({
        gradeId: 97,
        leaveType: 0,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        casual6 = res.data.data.total
        // console.log(casual6, '初三')
        this.casualData = [
          {value: Number(casual1) + Number(casual2) + Number(casual3), name: '高中'},
          {value: Number(casual4) + Number(casual5) + Number(casual6), name: '初中'}
        ]
        let casualLeave = document.getElementById('casualLeave');
        let casualData = this.casualData
        let xData3 = ['初中', '高中']
        this.drawLine(casualLeave, '各年级事假占比', xData3, casualData, false)
        // console.log(this.casualData)
      })
    },
    // 获取晚休饼图数据
    getnightList() {
      let night1 = ''
      let night2 = ''
      let night3 = ''
      let night4 = ''
      let night5 = ''
      let night6 = ''
      var time = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      //高中数据统计
      particularsObj(Object.assign({
        gradeId: 126,
        leaveType: 2,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        night1 = res.data.data.total
        // console.log(night1, '高一')
      })
      particularsObj(Object.assign({
        gradeId: 127,
        leaveType: 2,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        night2 = res.data.data.total
        // console.log(night2, '高二')
      })
      particularsObj(Object.assign({
        gradeId: 128,
        leaveType: 2,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        night3 = res.data.data.total
        // console.log(night3, '高三')
      })
      //初中数据统计
      particularsObj(Object.assign({
        gradeId: 95,
        leaveType: 2,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        night4 = res.data.data.total
        // console.log(night4, '初一')
      })
      particularsObj(Object.assign({
        gradeId: 96,
        leaveType: 2,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        night5 = res.data.data.total
        // console.log(night5, '初二')
      })
      particularsObj(Object.assign({
        gradeId: 97,
        leaveType: 2,
        leaveStatus: 1,
        endTime: time,
      },)).then(res => {
        night6 = res.data.data.total
        // console.log(night6, '初三')
        this.nightData = [
          {value: Number(night1) + Number(night2) + Number(night3), name: '高中'},
          {value: Number(night4) + Number(night5) + Number(night6), name: '初中'}
        ]
        let nightLeave = document.getElementById('nightLeave');
        let nightData = this.nightData
        let xData4 = ['初中', '高中']
        this.drawLine(nightLeave, '各年级晚休占比', xData4, nightData, false)
        // console.log(this.nightData)
      })
    },

    //表图方法
    drawLine(dom, name, legendData, seriesData, isPie) {
      let myChart = echarts.init(dom)
      let radiuss;
      let leaveTotal;
      let isright;
      let isBottom;
      let isCenter;
      let width;
      let title;
      let position;
      if (isPie) {
        radiuss = ['60%', '83%']
        leaveTotal = this.leaveTotal
        isright = 'right'
        isCenter = 'center'
        isBottom = 'right'
        width = 70
        title = 'left'
        position = ['30%', '50%']    // 饼图位置
      } else {
        radiuss = [0, '80%']
        isBottom = 'center'
        title = 'center'
        position = ['40%', '50%']
      }
      var option = {
        title: {//标题组件
          text: name,
          left: title,//标题的位置 默认是left，其余还有center、right属性
          textStyle: {
            color: "#333333",
            fontSize: 16,
            fontWeight: 'normal',
          }
        },
        graphic: { // 添加原生图形元素组件
          elements: [
            {
              type: 'text',
              left: '34%',
              top: '43%',
              style: {
                text: leaveTotal,
                fontSize: 30,
                textAlign: 'center',
                width: 30,
                height: 25,
                fill: '#000000'
              }
            }, {
              type: 'text', // 组件类型
              left: '32%', //定位
              top: '52%', // 定位
              style: { // 样式
                text: '请假人数', //文字
                fontSize: 13, //文字大小
                textAlign: 'center', //定位
                width: 30,
                height: 30,
                fill: '#7A7A7A' // 字体颜色
              }
            },]
        },
        tooltip: { //提示框组件
          trigger: 'item', //触发类型(饼状图片就是用这个)
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#1783F8', '#09BC6C', '#F97474'], //手动设置每个图例的颜色
        legend: { //图例组件
          // top:150, //图例组件离右边的距离
          orient: 'horizontal', //布局 纵向布局 图例标记居文字的左边 vertical则反之
          width: width,
          bottom: 10,//图行例组件的宽度,默认自适应
          left: isBottom, //图例显示在右边
          x: isright,
          y: isCenter, //图例在垂直方向上面显示居中
          itemWidth: 10, //图例标记的图形宽度
          itemHeight: 10, //图例标记的图形高度
          data: legendData,
          textStyle: { //图例文字的样式
            color: '#7A7A7A', //文字颜色
            fontSize: 14, //文字大小
            formatter: '{b}:{c} {d}% '
          }
        },
        // dataRange:{
        //   borderColor: '#ccc',
        //   borderWidth: 10,
        // },
        series: [ //系列列表
          {
            name: '请假人数', //系列名称
            left: 50,
            type: 'pie', //类型 pie表示饼图
            center: position, //设置饼的原心坐标 不设置就会默认在中心的位置
            radius: radiuss, //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            itemStyle: { //图形样式   加边框
              borderRadius: 20,
              borderColor: '#fff',
              borderWidth: 2,
              // emphasis: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              //   label: { //饼图图形上的文本标签
              //     show: false,
              //     position: 'center',
              //     textStyle: {
              //       fontSize: '10',
              //       fontWeight: 'normal'
              //     }
              //   }
              // },
            },
            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              label: { //饼图图形上的文本标签
                show: false //平常不显示
              },
              labelLine: { //标签的视觉引导线样式
                show: false //平常不显示
              }
            },
            labelLine: {
              show: false
            },
            label: {
              show: false,
              position: 'center',
            },
            data: seriesData
          }
        ]
      };
      myChart.setOption(option)
      let that = this
      // 点击饼图跳转
      myChart.on('click', function (params) {
        if (params.name === '病假') {
          that.gotoSick()
        } else if (params.name === '事假') {
          that.gotoCasual()
        } else if (params.name === '晚休') {
          that.gotoNight()
        }
      });
    },

    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
  }
}
</script>

<style scoped="scoped" lang="scss">
.is-selected {
  color: #1989FA;
}

/deep/ .el-card {
  background: #f7f7f7;
}
/deep/.el-card__body{
  padding: 10px;
}
.top {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 5px 2px #e5e5e5b8;
  padding: 10px 0 10px 30px;
}
.topLeft {
  width: 69%;
  height: 85%;
  //float: left;
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 10px;
  box-shadow: 0 0 5px 2px #e5e5e5b8;
  margin-bottom: 10px;
}
.topRight {
  width: 30%;
  height: 85%;
  float: right;
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 30px;
  box-shadow: 0 0 5px 2px #e5e5e5b8;
  margin-bottom: 10px;
  //position: relative;
  //top:0;
  //right: 0;
}

.bottom {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 30px;
  box-shadow: 0 0 5px 2px #e5e5e5b8;
  float: left;
}

.bottom-leave {
  width: 31%;
  float: left;
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 30px;
  box-shadow: 0 0 5px 2px #e5e5e5b8;
}

.bottom-right {
  width: 68%;
  float: right;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px 2px #e5e5e5b8;
}

.bottom-item {
  width: 32%;
  float: left;
  margin-left: 1%;
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 30px;
  //box-shadow: 0 0 5px 2px #e5e5e5b8;
}

/deep/ .el-radio-button__inner {
  border: 1px solid #DCDFE6;
  margin: 0 5px;
  border-radius: 4px;
}
/deep/.radiogroup .el-radio-button--small .el-radio-button__inner{
  padding: 9px 5px;
}
/deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 4px;
}

/deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 4px;
}
/deep/.el-calendar__header{
  padding: 0;
}
/deep/.el-calendar__body{
  padding: 0;
}

/deep/ .is-selected {
  //color: #fff;
  background-color: #f2f8fe !important
}

/deep/ .el-calendar-table td.is-selected:hover {
  color: #303133 !important
}
/deep/.el-calendar-table tr td:first-child{
  border: none;
}

/deep/ .el-calendar-table tr td {
  border: none;
}

/deep/ .avue-data-tabs .item-tip {
  opacity: 0
}

/deep/ .el-button--mini, .el-button--mini.is-round {
  padding: 7px 10px;
}

/deep/ .el-calendar-table .el-calendar-day {
  height: 46px;
  //line-height: 0;
  text-align: center;
  padding: 1px;
  box-sizing: border-box
}

/deep/ .el-calendar-table .el-calendar-day p {
  margin: 0;
  padding: 12px;
}
.bg{
  background-image: url("/img/bg/login.png");
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 90%;
  margin: 0 auto;
  -webkit-animation: animate-cloud 20s linear infinite;
  animation: animate-cloud 20s linear infinite;
  display: flex;
}
</style>
